<!--
 * @Author: your name
 * @Date: 2021-08-16 19:00:52
 * @LastEditTime: 2021-08-21 09:42:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \系统学习\VueProject\vue02\supermall\src\views\detail\Detail.vue
-->
<template>
   <div id="detail">
       <detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav" />
       <scroll class="content" ref="scroll" 
       @scroll="contentScroll" :probe-type="3">
       <!-- <ul>
           <li v-for="item in $store.state.cartList">{{item}}</li>
       </ul> -->
           <detail-swiper :top-images="topImages" />
           <detail-base-info :goods="goods" />
           <detail-shop-info :shop="shop" />
           <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad" />
           <detail-param-info :param-info="paramInfo" ref="params" />
           <detail-comment-info :comment-info="commentInfo" ref="comment" />
           <goods-list :goods="recommends" ref="recommend" />
       </scroll>
       <detail-bottom-bar @addCart="addToCart" />
       
       <!-- <toast :message="message" :show="show" /> -->
   </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar.vue'
import DetailSwiper from './childComps/DetailSwiper.vue'
import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
import DetailShopInfo from './childComps/DetailShopInfo.vue'
import DetailGoodsInfo from './childComps/DetailGoodsInfo.vue'
import DetailParamInfo from './childComps/DetailParamInfo.vue'
import DetailCommentInfo from './childComps/DetailCommentInfo.vue'
import DetailBottomBar from './childComps/DetailBottomBar.vue'

import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/content/goods/GoodsList'
// import Toast from 'components/common/toast/Toast'

import {getDetail,Goods,Shop,GoodsParam,getRecommend} from 'network/detail.js'
import {debounce} from 'common/utils'
import {itemListenerMixin} from 'common/mixin'

import {mapActions} from 'vuex'
export default {
    name:'Detail',
    components:{
        DetailNavBar,
        DetailSwiper,
        DetailBaseInfo, // 商品基本信息
        DetailShopInfo, // 店铺信息
        DetailBottomBar,       
        DetailGoodsInfo,
        DetailParamInfo,
        DetailCommentInfo,
        Scroll,
        GoodsList,
        // Toast
    },
    // 混入
    mixins:[itemListenerMixin],
    data(){
        return {
            iid:null,
            topImages:[],
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            commentInfo:{}, // 评论信息
            recommends:[],  // 推荐信息
            themeTopYs:[], // 存放标题对应组件的y值
            getThemeTopY:null,
            currentIndex:null,
            // message:'',
            // show:false
        }
    },
    created(){
        // 1. 保存传入的iid
        this.iid = this.$route.params.iid

        // 2. 根据iid请求详情数据
        getDetail(this.iid).then(res => {
            // console.log(res);
            // 2.1 获取顶部的轮播数据
            const data = res.result
            this.topImages = data.itemInfo.topImages
            // 2.2 获取商品信息
            this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services)
            // 2.3 创建店铺信息的对象
            this.shop = new Shop(data.shopInfo)
            // 2.4 保存商品的详情数据
            this.detailInfo = data.detailInfo
            // 2.5 获取参数信息
            this.paramInfo = new GoodsParam(data.itemParams.info,data.itemParams.rule)
            // 2.6 获取评论信息
            if(data.rate.cRate !== 0){
                this.commentInfo = data.rate.list[0]
            }
        })
        
        // 3. 请求推荐数据
        getRecommend().then(res => {
            // console.log(res);
            this.recommends = res.data.list
        })

        // 4. 给getThemeTopY赋值(给这个操作进行防抖)
        this.getThemeTopY = debounce(() => {
            this.themeTopYs = []
            // $el 对应的根元素
            this.themeTopYs.push(0)
            this.themeTopYs.push(this.$refs.params.$el.offsetTop )
            this.themeTopYs.push(this.$refs.comment.$el.offsetTop )
            this.themeTopYs.push(this.$refs.recommend.$el.offsetTop )
            this.themeTopYs.push(Number.MAX_VALUE)
            console.log(this.themeTopYs);
        },100)
    },
    mounted(){
        // console.log('mounted');
        
    },
    destroyed(){
        this.$bus.$off('itemImageLoad',this.itemImgListeren)
    },
    methods:{
        ...mapActions(['addCart']),
        imageLoad(){
            // this.$refs.scroll.refresh()
            this.refresh()
            this.getThemeTopY()
        },
        // 头部导航栏点击
        titleClick(index){
            // console.log(index);
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100)
        },
        contentScroll(position){
            // console.log(position);
            // 1. 获取y值
            const positionY = -position.y
            // 2. positionY和主题中值进行对比
            // [0, 6238, 7041, 7247]
            // positionY 在 0 和 6238 之间，index = 0
            // positionY 在 6238 和 7041 之间，index = 1
            // positionY 在 7041 和 7247 之间，index = 2
            // positionY 超过 7247 ，index = 3
            let length = this.themeTopYs.length
            for(let i = 0; i < length - 1;i++) {
                // 这里的i是字符串类型
                // if(positionY > this.themeTopYs[i] && positionY < this.themeTopYs[i + 1]){
                //     console.log(i);
                // }
                // if(this.currentIndex !== i && ((i < length -1 && positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i + 1])
                //    || (i === length - 1 && positionY >= this.themeTopYs[i]))){
                //        console.log(i);
                //     this.currentIndex = i
                //     this.$refs.nav.currentIndex = this.currentIndex
                // }

                //  [0, 6238, 7041, 7247,非常大的值]
                if(this.currentIndex !== i && (positionY >= this.themeTopYs[i] && this.themeTopYs[i+1])) {
                    this.currentIndex = i
                    this.$refs.nav.currentIndex = this.currentIndex
                }
            }
        },
        addToCart(){
            // 1. 获取购物车需要展示的信息
            const product = {}
            product.image = this.topImages[0]
            product.title = this.goods.title
            product.desc = this.goods.desc
            product.price = this.goods.realPrice
            product.iid = this.iid
            // 2. 将商品添加到购物车(1.Promise 2.mapActions)
            // this.$store.commit('addCart',product)
            this.addCart(product).then(res => {
                // console.log(res);
                // this.show = true
                // this.message = res
                // setTimeout(() => {
                //     this.show = false
                //     this.message = ''
                // },1500)

                this.$toast.show(res,2000)
            })
            // this.$store.dispatch('addCart',product).then(res => {
            //     console.log(res);
            // })
        }
    }
}
</script>

<style scoped>
    #detail{
        position: relative;
        z-index: 999;
        background: #fff;
        height:100vh;
    }
    .content{
        position: relative;
        height: calc(100% - 44px - 49px);
        overflow: hidden;
    }
    .detail-nav{
        position: relative;
        z-index: 999;
        background-color: #fff;
    }
</style>